<template>
  <div name="新闻类型维护" class="gl_contentBox gl_heightFull">
    <!-- 操作按钮 -->
    <el-row :gutter="20" class="gl_mb_15">
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="openAddTemplate()">新建新闻类型</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" class="gl_table_noBorder" :border="false" stripe size="mini">
      <!-- 通用-序号 -->
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column prop="name" label="类型" align="center">
        <template slot-scope="{row}">
          <div>{{ row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="编辑者" align="center">
        <template slot-scope="{row}">
          <div>{{ row.creatorName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creationTime" label="编辑时间" align="center">
        <template slot-scope="{row}">
          <div>{{ row.creationTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operating" label="操作" align="center" width="200">
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editItem(row,$index)">编辑</el-button>
          <el-button type="text" size="mini" @click="deleteItem(row,$index)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="qo.Page"
        :page-size="qo.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>

    <!-- 新建类型弹窗 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="450px"
      :title="type === 'edit' ? '编辑' : '新建'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form
        ref="newsTypeInput"
        :model="newsTypeInput"
        :rules="AddNewsType_Rules"
        label-width="80px"
        size="mini"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型名称" prop="name">
              <el-input v-model.trim="newsTypeInput.name" size="small" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" :loading="submitLoading" type="primary" @click="submitAddTemplate">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FormatDate } from '@/lib';
import {
  api_GET_EventsManagementNewsType, // 查询新闻类型
  api_GET_EventsManagementNewsTypeId, // 查询指定的新闻类型
  api_POST_EventsManagementNewsType, // 创建新闻类型
  api_PUT_EventsManagementNewsTypeId, // 更新新闻类型
  api_DELETE_EventsManagementNewsTypeId // 删除新闻类型
} from '@/extend/api/gameswaggerApi/app.js';
import { Api_GET_EventsManagementNewsTypeQO } from '@/lib/form/game/swaggerForm';
import { AddNewsType_Rules } from '@/lib/validate/wxApp/index.js';
export default {
  data () {
    return {
      qo: new Api_GET_EventsManagementNewsTypeQO(),
      AddNewsType_Rules: new AddNewsType_Rules(),
      tableData: [],
      loading: false,
      total: 0,
      // 新增模板
      type: '',
      dialogVisible: false,
      submitLoading: false,
      newsTypeInput: {}
    };
  },
  watch: {
    dialogVisible: {
      handler(val) {
        if (!val) {
          this.$refs.newsTypeInput.resetFields();
          this.newsTypeInput = {};
        }
      }
    }
  },
  created() {
    this.getPageList();
  },
  methods: {
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.loading = true;
      api_GET_EventsManagementNewsType(this.qo).then(
        res => {
          if (res) {
            this.tableData = res.items || [];
            this.tableData.map(item => {
              item.creationTime = item.creationTime ? FormatDate(item.creationTime, 'yyyy-MM-dd HH:mm:ss') : '';
            });
            this.total = res.totalCount;
            this.loading = false;
          }
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
          this.loading = false;
        }
      );
    },
    queryList(obj) {
      this.qo = obj;
      this.getPageList();
    },
    // 新建模板
    openAddTemplate() {
      this.type = 'add';
      this.dialogVisible = true;
    },
    // 查看详情
    editItem(item) {
      api_GET_EventsManagementNewsTypeId(item.id).then(
        res => {
          this.newsTypeInput = res;
          this.type = 'edit';
          this.dialogVisible = true;
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 确认新建
    submitAddTemplate() {
      this.$refs['newsTypeInput'].validate(valid => {
        if (valid) {
          if (this.type === 'add') {
            this.creatNewsType();
          } else {
            this.updateNewsType();
          }
        }
      });
    },
    // 创建
    creatNewsType() {
      this.submitLoading = true;
      api_POST_EventsManagementNewsType(this.newsTypeInput).then(
        res => {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.submitLoading = false;
          this.dialogVisible = false;
          this.getPageList();
        },
        error => {
          this.submitLoading = false;
          this.dialogVisible = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 更新
    updateNewsType() {
      this.submitLoading = true;
      api_PUT_EventsManagementNewsTypeId(this.newsTypeInput.id, this.newsTypeInput).then(
        res => {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.getPageList();
          this.submitLoading = false;
          this.dialogVisible = false;
        },
        error => {
          this.submitLoading = false;
          this.dialogVisible = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 删除
    deleteItem(row, index) {
      this.$confirm(`您确定要删除该条新闻类型吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_EventsManagementNewsTypeId(row.id).then(
            () => {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getPageList();
            },
            error => {
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            }
          );
        });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.getPageList(currentPage);
    }
  }
};
</script>

